<style>

	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities, .types{width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.types { justify-content: space-around; margin: 30px 0; font-size: 14px; color: #2C405A;}
	.city, .type { text-align: center;}
	.gyms  { width: 100%;  margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;}
	.gym{ width: 160px; height: 30px; font-size: 12px; margin-left: 20px;}
	
	.charts { width: 90%; margin-left: 5%; justify-content: space-around; margin-top: 30px;}
	.chart { width: 30%; height: 350px;}

	.waiting { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); }
	.waiting > div { width: 200px; height: 40px; font-size: 60px; font-weight: bolder; color: darkorange; text-shadow: 0 0 6px #555555; margin: 300px auto;}	
	.memo { font-size: 10px; margin-left: 5%;}
</style>

<div>

	<div id="vm">
		<h4 class="pagetitle">转化率和续课率</h4>
		<div class="cities line">
			<div class="city item" :class="city == 'nation' ? 'choosed':''" @click="choosenation()">全国</div>
			<div v-for="(item, i) in cities" class="city item" :class="item.city == city ? 'choosed' : ''" @click="choosecity(item.city)">{{item.city}}</div>
		</div>
		<div class="gyms line"  v-show="city != 'nation'">
			<div class="gym item" :class="gymid == -1 ? 'choosed':''" @click="chooseallgym()">{{city}}全部门店</div>
			<div v-for="(item, i) in gyms" class="gym item" :class="item.gymid == gymid ? 'choosed' : ''" @click="choosegym(item.gymid)">{{item.gymname}}</div>
		</div>
		<div class="line charts">
			<div id="chart_funnel" class="chart" style="flex: 3;"></div>
			<div id="chart_zk" class="chart" style="flex: 2;"></div>
			<div id="chart_xk" class="chart" style="flex: 2;"></div>

		</div>
		
		<div style="height: 40px;"></div>
		<section class="waiting" v-if="isLoading"><div>waiting...</div></section>
	</div>
	<div class="memo">
		<h6>注：</h6>
		<ol>
			<li>所有数据截止到昨日</li>
			<li>定义：</li>
				<ul>
					<li>转化用户：指购买正式课用户。</li>
					<li>续课率 = 续课用户 / 转化用户</li>
					<li>续课用户：指购买二次以上正式课的用户。</li>
					<li>转化率 = 购买正式课用户 / 所有购课用户</li>
					<li>多次续课用户：指购买三次以上正式课的用户</li>
				</ul>
			<li>特别注意：在漏斗图中，各项百分比均以“所有购课用户”为分母，而仪表盘图“续课率”采用转化用户为分母，表达的不同意义。</li>
		</ol>
	</div>
</div>	

<script>
	var vm = new Vue({
		el: '#vm',
		data: {
			cities: [],  city: C.city,
			gyms: [],    gymid: C.gymid,
			datas: {allusers: 0, ty_users: 0, zk_users: 0, classes_users: 0, xk_users: 0, xks_users: 0} ,
			isLoading: false,
			// 依次：所有购课学员，上课学员（含体验课），转化学员，正式课上课学员， 续课学员， 多次续课学员

		},
		methods: {
			choosecity: function(i){
				if(this.isLoading) return;
				this.city = i;
				this.showgyms();
			},
			choosenation: function(){ // 选择全国
				if(this.loading) return;
				this.city = 'nation'
				this.getdatas()
			},
			showgyms: function(){
				let that = this;
				post(dataDomain + "data/post.php/ksap/users/city_gyms", {"city": this.city}, function(r){
					console.log(r);
					that.gyms = r.data;
					that.gymid = r.data[0].gymid
					that.getdatas()
				})
			},
			choosegym: function(i){
				if(this.isLoading) return;
				this.gymid = i;
				this.getdatas()
			},
			chooseallgym: function(){
				this.gymid = -1;
				this.getdatas()
			},
			getdatas: function(){
				// 
				let that = this;
				let counter = 6; // 总共通过6个查询叠加获得结果
				this.isLoading = true;
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": '', "having": ''}, function(r){
					console.log(r); // 购买体验课学员（人数包含跳过体验课直接上正式课学员）
					that.datas.allusers = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": ' and s.use_times > 0', "having": ''}, function(r){
					console.log(r); // 上过体验课的学员
					that.datas.ty_users = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": ' and s.use_times > 1', "having": ''}, function(r){
					console.log(r); // 转化学员
					that.datas.zk_users = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": ' and s.all_times > 1 and s.use_times > 0', "having": ''}, function(r){
					console.log(r); // 上过正式课的学员
					that.datas.classes_users = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": ' and s.all_times > 1', "having": ' having ct > 1'}, function(r){
					console.log(r); // 续课学员
					that.datas.xk_users = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
				post(dataDomain + "data/post.php/ksap/gyms/countusers", {"gymid": this.gymid, "city": this.city,
					"condition": ' and s.all_times > 1', "having": ' having ct > 2'}, function(r){
					console.log(r); // 多次续课学员
					that.datas.xks_users = Number(r.data[0].c);
					counter --;
					if(counter == 0) that.showcharts();
				})
			},
			showcharts: function(){
				let that = this;
				console.log(that.datas);
				let opt_zk = rd.chart_option.createNew('gauge');
				opt_zk.option.series[0].data.push({name: '转化率', value: Math.floor(that.datas.zk_users / that.datas.allusers * 10000) / 100});
				opt_zk.option.series[0].name = '转化率'
				let chart_zk = echarts.init(document.getElementById("chart_zk"));
				chart_zk.setOption(opt_zk.option);
				
				let opt_xk = rd.chart_option.createNew('gauge');
				opt_xk.option.series[0].data.push({name: '续课率', value: Math.floor(that.datas.xk_users / that.datas.zk_users * 10000) / 100});
				opt_xk.option.series[0].name = '续课率'
				let chart_xk = echarts.init(document.getElementById("chart_xk"));
				chart_xk.setOption(opt_xk.option);
				
				let opt_funnel = rd.chart_option.createNew('funnel');
				let data = [
					{name: "所有购课用户", value: 100},
					{name: "上过体验课用户", value: Math.floor(that.datas.ty_users / that.datas.allusers * 10000) / 100},
					{name: "购买正式课用户", value: Math.floor(that.datas.zk_users / that.datas.allusers * 10000) / 100},
					{name: "上过正式课用户", value: Math.floor(that.datas.classes_users / that.datas.allusers * 10000) / 100},
					{name: "续课用户", value: Math.floor(that.datas.xk_users / that.datas.allusers * 10000) / 100},
					{name: "多次续课用户", value: Math.floor(that.datas.xks_users / that.datas.allusers * 10000) / 100},
				];
				opt_funnel.option.legend.data = ["所有购课用户","上过体验课用户","转化用户","上过正式课用户","续课用户","多次续课用户"]
				opt_funnel.option.series[0].data = data;
				let chart_funnel = echarts.init(document.getElementById("chart_funnel"));
				chart_funnel.setOption(opt_funnel.option);
				this.isLoading = false;
			}
		},
		mounted(){
			var that = this;
			post(dataDomain + "data/post.php/ksap/gyms/cities", {}, function(r){
				that.cities = r.data
				that.showgyms()
			})
			let dd = new Date()
			console.log()
		}
		
	})
</script>